<template>
  <el-card>
    <div class="sendout">
      <h3 class="applyRecode">全部订单</h3>
      <el-form  class="form" :model="form" ref="form" label-width="100px">
        <el-form-item class="dates" label="支付时间">
          <el-col :span="5">
            <el-form-item prop="stratTime" size="small">
              <el-date-picker v-model="form.stratTime" type="datetime" placeholder="选择开始日期"></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col class="line" :span="2">至</el-col>
          <el-col class="zuo" :span="5">
            <el-form-item prop="endTime" size="small">
              <el-date-picker v-model="form.endTime" type="datetime" placeholder="选择结束日期"></el-date-picker>
            </el-form-item>
          </el-col>
        </el-form-item>
        <el-form-item class="send" size="small" label="订单类别：">
          <el-select class="publis" v-model="form.kinds" placeholder="请选择">
            <el-option v-for="(item, index) in items" :key="index" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item class="send type" size="small" label="订单状态：">
          <el-select class="publis" v-model="form.status" placeholder="请选择">
            <el-option v-for="(sta, index) in stas" :key="index" :label="sta.label" :value="sta.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item class="sea" size="small" label="搜索：">
          <el-input placeholder="请输入订单编号/下单人手机号" v-model="form.search"></el-input>
        </el-form-item>
        <div class="btns"><el-button type="primary" @click="findInit" size="small">查询</el-button></div>
      </el-form>
      <div class="btns">
        <el-button type="primary" size="small">导出</el-button>
      </div>
      <el-table class="tables" :data="tableData">
        <el-table-column prop="faId" label="发货单ID" align="center"></el-table-column>
        <el-table-column prop="orderId" label="订单ID" align="center"></el-table-column>
        <el-table-column prop="orderstate" label="订单状态" align="center"></el-table-column>
        <el-table-column prop="ordertype" label="订单类别" align="center" width="80px"></el-table-column>
        <el-table-column prop="sendmsg" label="下单人信息" align="center"></el-table-column>
        <el-table-column prop="paytime" label="支付时间" align="center" width="90px"></el-table-column>
        <el-table-column prop="getmsg" label="收货人信息" align="center" width="90px"></el-table-column>
        <el-table-column prop="goodsName" label="商品名称" align="center" width="90px"></el-table-column>
        <el-table-column prop="sku" label="SKU" align="center" width="90px"></el-table-column>
        <el-table-column prop="mounts" label="数量" align="center" width="90px"></el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button type="text" @click="allodetail(scope.row)" size="small">查看详情</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="page">
        <el-pagination background style="float:right;margin:0 0 30px"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </div>
    </div>
  </el-card>
</template>
<script>
export default {
  name: 'sendout',
  data () {
    return {
      currentPage: 1,
      pagesize: 10,
      total: 40,
      form: {
        stratTime: '',
        endTime: '',
        kinds: '',
        status: '',
        search: ''
      },
      tableData: [
        {
          faId: '',
          orderId: '',
          orderstate: '',
          ordertype: '用户订单',
          sendmsg: '',
          paytime: '',
          getmsg: '',
          goodsName: '',
          sku: '',
          mounts: ''
        }
      ],
      items: [
        {
          label: '类别1',
          value: '0'
        },
        {
          label: '类别2',
          value: '1'
        }
      ],
      stas: [
        {
          label: '待发货',
          value: '0'
        },
        {
          label: '已发货',
          value: '1'
        }
      ]
    }
  },
  created () {

  },
  methods: {
    allodetail (row) {
      this.$router.push('/allodetail')
    },
    findInit () {
      // this.currentPage = 1
      // this.init()
    },
    handleSizeChange (val) {
      // this.pagesize = val
      // this.init()
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange (val) {
      // this.currentPage = val
      // this.init()
      console.log(`当前页: ${val}`)
    }
  }
}
</script>
<style lang="scss" scope>
.sendout {
  .form {
    display: flex;
    .dates {
      .el-form-item {
        .el-form-item__content {
          .el-date-editor.el-input {
            width: 188px;
          }
        }
      }
      .line {
        padding-left: 90px;
      }
      .zuo {
        margin-left: 21px;
      }
    }
    .send {
      margin-left: -90px;
      .el-form-item__content {
        .el-select {
          width: 150px;
        }
      }
    }
    .send.type {
      margin-left: 0;
    }
    .sea {
      .el-form-item__content {
        .el-input {
          width: 215px;
        }
      }
    }
  }
  .tables {
    margin: 15px 0 30px;
  }
  .btns {
    .el-button {
      border-radius: 4px;
      margin-left: 20px;
    }
  }
}
</style>
